<template>
    <view class="content">
        <!-- <view class="top">
			<image src="../../static/image/sta_2.png" class="sta-1"></image>
			<view>用户待体验</view>
		</view> -->
		<!-- <view class="top">
			<image src="../../static/image/sta_2.png" class="sta-1"></image>
			<view>等待客服确认!</view>
		</view> -->
		<view class="top">
			<image src="../../static/image/sta_3.png" class="sta-1"></image>
			<view>{{data.status_txt}}</view>
		</view>
		
		<view class="box" v-if="data.reason && data.status == 2">
			<view class="u-font-26 u-p-b-10">
				<view class="i-left u-p-b-15">失败原因：</view>
				<view class="i-right">
					{{data.reason}}
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="item">
				<view class="i-left">会员卡号</view>
				<view class="i-right">
					{{data.card_no}}
				</view>
			</view>
			<view class="item">
				<view class="i-left">联系电话</view>
				<view class="i-right">
					{{data.mobile}}
				</view>
			</view>
			<view class="item">
				<view class="i-left">预约编号</view>
				<view class="i-right">
					{{data.order_no}}
				</view>
			</view>
			<!-- <view class="item">
				<view class="i-left">预约电话</view>
				<view class="i-right">
					13578990841
				</view>
			</view> -->
			<view class="item">
				<view class="i-left">预约会员</view>
				<view class="i-right">
					<view>
						{{data.nickname}}<text class="tip">({{data.thali}}<text v-if="data.is_sex_txt">-{{data.is_sex_txt}}</text>)</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="i-left">预约时间</view>
				<view class="i-right">
					{{data.subscribe_time}}
				</view>
			</view>
			<view class="item">
				<view class="i-left">体检机构</view>
				<view class="i-right">
					{{data.center}}
				</view>
			</view>
			<view class="item">
				<view class="i-left">体检地址</view>
				<view class="i-right">
					<view class="u-flex-1">{{data.address}}</view>
					<view class="add-r" @click="toGuide">
						<u-icon name="map-fill" color="#01b6bc" size="28" class="u-m-r-5"></u-icon>
						定位
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="item">
				<view class="i-left">{{data.pay_type_txt}}</view>
				<view class="i-right">
					¥<text class="u-font-32">{{data.pay_amount}}元</text>
					<text class="tip">(原价:¥{{data.original_price}})</text>
				</view>
			</view>
		</view>
		
		<view class="d-tip" v-if="content.content">
			<view class="u-p-b-10 text-bold">温馨提示：</view>
			<view class="tip">
				<u-parse :html="content.content"></u-parse>
			</view>
		</view>
		
		<view v-if="data.evaluates && data.evaluates.level">
			<view class="title">评价</view>
			<view class="box">
				<u-rate v-model="data.evaluates.level" :count="data.evaluates.level" disabled active-color="#fcc206"></u-rate>
				<view class="text">{{data.evaluates.content}}</view>
				<view class="spec">
					规格：{{data.evaluates.title}}
				</view>
			</view>
		</view>
		
		<view class="btn" v-if="data.status == 1" @click="finish">完成体检</view>
		<view class="btns" v-if="data.status == 0">
			<view class="btn3" @click="confirm(2)">预约失败</view>
			<view class="btn2" @click="confirm(1)">预约成功</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value:5,
				id: '',
				data: {},
				content: {},
            };
        },
        onLoad(option) {
            this.id = option.id
			this.getData()
			this.getContent()
        },
        methods: {
			// 预约成功 / 失败
			confirm(num) {
				this.$ajax('staff_confirm_subscribes', {
				    userToken: this.$getSync('userToken'),
				    subscribes_id: this.id,
				    status: num,//1-预约成功 2-预约失败
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 完成体检
			finish() {
				this.$ajax('staff_finish_subscribes', {
				    userToken: this.$getSync('userToken'),
				    subscribes_id: this.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			//导航
			toGuide() {
			    let _this = this
			    uni.openLocation({
					latitude: Number(_this.data.lat),
					longitude: Number(_this.data.lng),
					address: _this.data.address,
			        success: function() {
			            console.log('success');
			        },
			        fail: (err) => {
			            console.log(err)
			            _this.$toast('导航失败，请重试！')
			        }
			    });
			},
			
            getData() {
				this.$ajax('staff_subscribes_detail', {
				    userToken: this.$getSync('userToken'),
				    subscribes_id: this.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 10,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding-bottom: 120rpx;
	}
	.top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
		padding: 35rpx 38rpx;
		background-color: #01b6bc;
		margin-bottom: 25rpx;
	}
	.sta-1{
		width: 91rpx;
		height: 91rpx;
		margin-right: 20rpx;
	}
	.box{
		padding: 35rpx 20rpx 25rpx;
		margin: 0 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
		font-size: 26rpx;
	}
	.i-left{
		color: #a6a6a6;
		padding-right: 25rpx;
	}
	.i-right{
		flex: 1;
		word-break: break-all;
		white-space: pre-line;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.add-r{
		color: #00b6bc;
		padding-left: 20rpx;
	}
	.d-tip{
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #5c667b;
	}
	.tip{
		color: #a0a8b8;
	}
	
	
	.title{
		font-size: 34rpx;
		font-weight: bold;
		padding: 36rpx 20rpx 20rpx;
	}
	.text{
		padding: 25rpx 0;
		font-size: 26rpx;
		word-break: break-all;
		white-space: pre-line;
	}
	.spec{
		padding: 16rpx 20rpx;
		background-color: #f6f8fb;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #35527e;
		word-break: break-all;
		white-space: pre-line;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 20rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	.btns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 70rpx 20rpx;
	}
	.btns>view{
		width: calc(680rpx / 2);
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		border-radius: 50rpx;
	}
	.btn2{
		background: #01b8bd;
	}
	.btn3{
		background: #999999;
	}
	

</style>
